import React from 'react';
import { Form, Input, Button, Col, InputNumber, Select } from 'antd';
import { POSITION, TYPE_OPTIONS } from '../../../../../utils/constant';
import Question from '../../../../../components/Question';
import FormItem from '../../../../../components/FormItem';

const MoreParam = ({ form, value, closeModal, onChange }) => {
  const { name, position, type, defaultVal, example, maxLength, enums, regExp } = value;

  const handleSubmit = (e) => {
    e.preventDefault();
    form.validateFields((err, values) => {
      if (!err) {
        onChange(values);
        closeModal();
      }
    });
  };

  const getFormItems = () => [
    {
      label: {
        label: '参数名',
      },
      name: 'name',
      options: {
        initialValue: name,
      },
      component: <Input disabled />,
    },
    {
      label: {
        label: '参数位置',
      },
      name: 'position',
      options: {
        initialValue: position,
      },
      component: (
        <Select disabled>
          {POSITION.map((item) => (
            <Select.Option value={item.value} key={item.value}>
              {item.label}
            </Select.Option>
          ))}
        </Select>
      ),
    },
    {
      label: {
        label: '参数类型',
      },
      name: 'type',
      options: {
        initialValue: type,
      },
      component: (
        <Select disabled>
          {TYPE_OPTIONS.map((item, index) => (
            <Select.Option value={index} key={index}>
              {item}
            </Select.Option>
          ))}
        </Select>
      ),
    },
    {
      label: {
        label: '默认值',
      },
      name: 'defaultVal',
      options: {
        initialValue: defaultVal,
        rules: [
          { max: 100, message: '最长100个字符' },
          { pattern: /^[\S]+$/, message: '不允许空字符' },
        ],
      },
      component: <Input />,
      after: <Question title={'若填值,用户不传或参数值为空，参数值默认为该值'} />,
    },
    {
      label: {
        label: '示例',
      },
      name: 'example',
      options: {
        initialValue: example,
        rules: [
          { max: 100, message: '最长100个字符' },
          { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' },
        ],
      },
      component: <Input />,
    },
    {
      label: {
        label: '最大长度',
      },
      name: 'maxLength',
      options: {
        initialValue: maxLength,
      },
      component: <InputNumber style={{ width: '100%' }} min={0} />,
    },
    {
      label: {
        label: '枚举',
      },
      name: 'enums',
      options: {
        initialValue: enums,
        rules: [
          { max: 100, message: '最长100个字符' },
          { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' },
        ],
      },
      component: <Input placeholder='用逗号隔开' />,
    },
    {
      label: {
        label: '参数验证',
      },
      name: 'regExp',
      options: {
        initialValue: regExp,
        rules: [
          { max: 1000, message: '最长1000个字符' },
          { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' },
        ],
      },
      component: <Input.TextArea placeholder='请输入正则表达式' maxLength={50} />,
    },
  ];

  return (
    <Form onSubmit={() => false}>
      {getFormItems().map((item) => (
        <Col span={24} key={item.name}>
          <FormItem form={form} item={item} colNum={1} />
        </Col>
      ))}
      <div style={{ marginTop: '20px', textAlign: 'center' }}>
        <Button className='marr10' onClick={() => closeModal()}>
          取消
        </Button>
        <Button type='primary' onClick={handleSubmit}>
          确定
        </Button>
      </div>
    </Form>
  );
};
export default Form.create()(MoreParam);
